<template>
    <div class="memorialManage-container">
        
		<el-main class="memorialManage-main">
			
            <!-- 1. 顶部栏 -->
            <div class="top-bar">
                <span class="breadcrumb-label">集体/宗祠/集体馆管理</span>
                <button class="return-button" @click="$router.back()">返回上一页</button>
            </div>

            <!-- 2. 操作按钮 -->
            <div class="action-buttons">
                <button @click="createCemeteryHall(2)">创建集体馆</button>
            </div>

            <!-- 3. 列表容器 -->
            <div class="hall-list-container">
                <div v-for="(hall, index) in pager.lists" :key="hall.id"  style="margin-bottom: 10px;padding: 20px;background-color: #fff;display: flex;align-items: center;justify-content: space-between;gap: 0 10px;">
                    <div class="logo-container">
                        <img :src="hall.logo" alt="Logo" class="logo-image" />
                    </div>
                    <div class="hall-item">
                        <span class="hall-title" @click="goCemeteryHome(hall)">{{ hall.name }}</span>
                        <div class="info-row">
                            <div class="info-left">
                                <span>{{ hall.type == 1 ? '集体馆' : '集体馆' }} (编号:{{ hall.id }})</span>
                                <span>状态:
                                    <span :class="{ 'status-unapproved': hall.is_disable == '2', 'status-approved': hall.is_disable == '1', 'status-disabled': hall.is_disable == '0' }">{{ hall.is_disable == '1' ? '审核通过' : hall.is_disable == '0'?'待审核':'未通过'  }}</span>
                                </span>
                                <span>创建时间: {{ hall.create_time }}</span>
                                <span>纪念馆数: {{ hall.mu_count }}</span>
                            </div>
                            <div class="info-right">
                                <el-button type="primary" @click.stop="gotoRMS(hall)">
                                    <!-- <el-icon><Setting /></el-icon> -->
                                    后台管理
                                </el-button>
                            </div>
                        </div>
                        <div class="action-row">
                            <div class="action-left">
                                <span @click.stop="goToEditCemetery(hall)">基本设置</span>
                                <span @click.stop="createQRcode(hall)">集体二维码</span>
                            </div>
                            <div class="action-right">
                                <span @click.stop="deleteCemetery(hall.id)" v-if="hall.user_id == userStore.userInfo.id">删除</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" ref="paginationRef"/>
            </div>
		</el-main>

        <!-- 使用封装的二维码组件 -->
        <QrCodePage 
            v-model="dialogVisible" 
            :qr-value="qrValue" 
            title="集体二维码"
        />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Setting } from '@element-plus/icons-vue';
import Header from '@/components/header/index.vue';
import Footer from '@/components/footer/index.vue';
import QrCodePage from '@/components/qrCodePage.vue';
import useUserStore from '@/stores/modules/user'
const userStore = useUserStore()
import { useRouter } from 'vue-router'
const router = useRouter();
type ViewMode = string;
const viewMode = ref<ViewMode>('cemetery'); // 当前视图状态 ('list' 或 'detail')
import { familyDelete, familyMyList, index_share_img } from '@/api/family';
import { usePaging } from '@/hooks/usePaging'
import feedback from '@/utils/feedback';

// 查看二维码
const qrValue = ref('')
const qrValueUrl = ref('https://cqjsyh.com/H5/pages/family/index?family_id=')
const dialogVisible = ref(false)
const qrCodeInfo = ref<any>(null)

// 打开二维码弹窗
const createQRcode = async (params: any) => {
    qrCodeInfo.value = params
    qrValueUrl.value = qrValueUrl.value + params.id
    // 获取二维码图片URL
    const res = await index_share_img({ url: qrValueUrl.value,family_id: params.id })
    qrValue.value = res.url
    dialogVisible.value = true
}









// 定义数据结构类型
interface Hall {
    id: number;
    name: string;
    url: string;
    type: '集体馆' | '家族馆';
    status: '未审核' | '正常';
    creationDate: string;
    memorialCount: number;
}

// 使用 ref 创建响应式数据，并根据图片内容填充
const halls = ref<Hall[]>([]);


// 去详情
const goCemeteryHome = async (params: any) => {
    if(params.is_disable != 1){
        return feedback.msgWarning('该集体馆未审核通过')
    }
    if(params.template_id === 0){
        window.open('/web/cemeteryHome?id=' + params.id, '_blank')
    }else{
        window.open('/web/cemeteryHomeTemplate?id=' + params.id, '_blank')
    }
    
    // router.push('/familyHome?id=' + params.id)
}

// 去创建集体馆
const createCemeteryHall = async (type: number) => {
    router.push('/memorialManage/createCemetery?type=' + type)

}
const queryParams = ref({
    type: 2
})
const { pager, getLists } = usePaging({
	fetchFun: familyMyList,
	params: queryParams.value
})
// 获取集体馆列表
onMounted( async ()=>{
    await getLists()
})


// 去编辑集体馆
const goToEditCemetery = async (params: any) => {
    if(params.is_disable != 1){
        return feedback.msgWarning('该集体馆未审核通过')
    }
    router.push('/memorialManage/editCemetery?id=' + params.id)
}


// 删除集体馆
const deleteCemetery = async (id: number) => {
    await feedback.confirm('确定要删除吗?')
    await familyDelete({id})
    getLists()
}

// 去后台管理
const gotoRMS = (params: any) => {
    // 打开另一个窗口
    window.open('/web/RMS?family_id=' + params.id, '_blank')
}
</script>

<style scoped>
.memorialManage-container {
	/* padding: 20px; */
	background: #f8f8f8;
}

.container {
	display: flex;
}

.sidebar {
	background: #fff;
}

.menu-card {
	padding: 10px 0;
}

.menu-title {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	margin-bottom: 10px;
	cursor: pointer;
}
.menu-title:hover {
	color: #F16C20;
}
.menu-item {
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 10px 0;
	cursor: default;
	font-weight: 500;
	border-top: #ccc 1px dotted;
	background: #F5F5F5;
    color: #666;
}

.sub-menu {
	padding-left: 12px;
	font-size: 14px;
	color: #666;
	margin: 5px 0;
	cursor: pointer;
}
.sub-menu:hover {
	color: #F16C20;
}

.content {
	padding-left: 0;
}

.memorialManage-main {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}
/* 使用常见的中文网站字体 */
.management-panel {
    font-family: "Microsoft YaHei", "SimSun", sans-serif;
    background-color: #ffffff;
    /* 确保背景是白色 */
    color: #333;
    width: 100%;
    /* 组件宽度自适应父容器 */
    max-width: 950px;
    /* 设定一个最大宽度以匹配图片观感 */
}

/* 顶部栏 */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    margin-bottom: 15px;
    border-bottom: 2px solid #F7941D;
}

.breadcrumb-label {
    background-color: #F7941D;
    color: white;
    padding: 6px 15px;
    font-size: 14px;
    border-radius: 3px;
}

.return-button {
    background-color: #F7941D;
    color: white;
    border: 1px solid #E68A00;
    padding: 5px 15px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 13px;
}

.return-button:hover {
    background-color: #E68A00;
}

/* 操作按钮 */
.action-buttons {
    margin-bottom: 20px;
}

.action-buttons button {
    background-color: #f7f7f7;
    border: 1px solid #ddd;
    padding: 8px 15px;
    margin-right: 10px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    border-radius: 3px;
}

.action-buttons button:hover {
    background-color: #e9e9e9;
}

/* 列表容器 */
.hall-list-container {
    /* border: 1px solid #ddd; */
}

.hall-item {
    width: calc(100% - 100px);
    /* padding: 20px;
    background-color: #fff; */
}

/* 列表项内容 */
.hall-title {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin: 0 0 10px 0;
    cursor: pointer;
}

.hall-url {
    font-size: 14px;
    color: #666;
    margin: 0 0 15px 0;
}

.hall-url a {
    color: #337ab7;
    text-decoration: underline;
    /* 根据图片，网址默认带下划线 */
}

.hall-url a:hover {
    color: #23527c;
}

/* 信息与操作链接 */
.info-row,
.action-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #555;
}

.info-row {
    margin-bottom: 15px;
}

.info-left span {
    margin-right: 25px;
}

.status-unapproved {
    color: #ff0000;
}
.status-approved {
    color: #008000;
}
.status-disabled {
    color: #808080;
}
.action-row a {
    color: #337ab7;
    text-decoration: none;
    /* 根据图片，操作链接默认无下划线 */
    font-size: 14px;
    margin-right: 25px;
}

.action-row a:hover {
    text-decoration: underline;
}

.action-right a:last-child {
    margin-right: 0;
}

/* 分隔线 */
.separator {
    border: none;
    border-top: 1px solid #e5e5e5;
    margin: 0;
}

.action-left{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0 10px;
    color: #4b5cc4;
    cursor: pointer;
}
.action-right{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0 10px;
    span{
        color: #4b5cc4;
        cursor: pointer;
    }
}


.qrcode-view{
    width: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
    gap: 20px 0;
}

/* Logo样式 */
.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    overflow: hidden;
}

.logo-image {
    max-width: 80px;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 5px;
}
</style>